<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格和按钮</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 50px" class="table-responsive"><!--响应式表格-->
<!--表格-->
<!--基本表格样式-->
<table class="table">
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>


<!--条纹装表格-->
<table class="table table-striped table-bordered" >
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

<!--带边框的表格-->
<table class="table table-bordered" >
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

<!--鼠标悬停-->
<table class="table table-hover" >
    <thead>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

<!--状态类-->
<table class="table table-hover" >
    <thead>
    <tr  class="active">
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr class="info">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="success">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="warning">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="danger">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="sr-only">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>

<!--按钮  三种方式-->
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">
<!--不同样式-->
<button class="btn btn-success">Button</button>
<button class="btn btn-info">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-danger">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-link">Button</button>
<!--大小-->
<button class="btn btn-lg">Button</button>
<button class="btn ">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>
<!--块级换行-->
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>
<!--激活状态-->
<button class="btn active">Button</button>
<!--禁用状态-->
<button class="btn active disabled">Button</button>


<!--图片-->
<!--图片形状-->
<img src="img/timg.jpeg" alt="图片" class="img-rounded">
<img src="img/timg.jpeg" alt="图片" class="img-circle">
<img src="img/timg.jpeg" alt="图片" class="img-thumbnail">

<!--响应式图片-->
<img src="img/timg.jpeg" alt="图片" class="img-responsive">


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>